<template>
	<div id="login">
		<el-dialog id="loginDialog" title="L O G I N" :visible.sync="loginDialogVisible" width="35%" :show-close="false"
		 :modal="false" :close-on-click-modal="false" center>
			<el-form id="loginForm" :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="70px">
				<el-form-item label="用户名:" prop="email">
					<el-input v-model="loginForm.email" placeholder="邮箱" />
				</el-form-item>
				<el-form-item label="密 码:" prop="password">
					<el-input type="password" v-model="loginForm.password" placeholder="密码" />
				</el-form-item>
				<el-form-item id="CaptchaFormItem" label="验证码:" prop="captchaValue" ref="CaptchaFormItemRef">
					<el-input id="CaptchaInput" v-model="loginForm.captchaValue" @focus="getCaptchaOnce()" placeholder="验证码" />
					<img style="cursor:pointer" id="captchaImg" :src="captchaImgSrc" @click="getCaptcha('defaultType')">
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-fotter">
				<el-link id="registerLink" type="info" @click="openRegisterForm()">注册</el-link>
				<el-button id="loginButton" type="primary" @click="doLogin()" :loading="loading" plain>登 录</el-button>
			</span>
		</el-dialog>
		<el-dialog id="registerDialog" title="R E G I S T E R" :visible.sync="registerDialogVisible" width="40%" @close="closedRegisterDialog"
		 :modal="false" center>
			<el-form :model="registerForm" :rules="registerFormRules" ref="registerFormRef" label-width="85px" class="registerForm">
				<el-form-item label="邮 箱:" prop="email">
					<el-input v-model="registerForm.email" placeholder="邮箱用做登录账号" />
				</el-form-item>
				<el-form-item id="CaptchaFormItem" label="验证码:" prop="captchaValue" ref="CaptchaFormItemRef">
					<el-input id="CaptchaInput" v-model="registerForm.captchaValue" placeholder="邮箱验证码" />
					<el-button type="info" plain @click="getCaptcha('emailType')" :loading="loading">发送验证码</el-button>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-fotter">
				<el-button id="loginButton" type="primary" @click="nextRegister()" :loading="loading" plain>N E X T</el-button>
			</span>
		</el-dialog>
		<el-dialog id="registerInfoDialog" title="R E G I S T E R" :visible.sync="registerInfoDialogVisible" width="40%"
		 :show-close="false" :modal="false" :close-on-click-modal="false" center>
			<el-form :model="registerForm" :rules="registerFormRules" ref="registerInfoFormRef" label-width="85px" class="registerForm">
				<el-form-item label="游戏ID:" prop="gameName">
					<el-input v-model="registerForm.gameName" placeholder="游戏内名称" />
				</el-form-item>
				<el-form-item label="密 码:" prop="password">
					<el-input type="password" v-model="registerForm.password" placeholder="设置密码" />
				</el-form-item>
				<el-form-item label="确认密码:" prop="checkPassword">
					<el-input type="password" v-model="registerForm.checkPassword" placeholder="再次确认密码" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-fotter">
				<el-button id="loginButton" type="primary" @click="doRegister()" :loading="loading" plain> 注 册 </el-button>
			</span>
		</el-dialog>
	</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			// 自定义,二次密码验证
			var validateCheckPassword = (rule, value, callback) => {

				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.registerForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				user:{},
				loginForm: {
					email: '',
					password: '',
					captchaKey: '',
					captchaValue: ''
				},
				registerForm: {
					email: '',
					captchaValue: '',
					password: '',
					gameName: '',
				},
				registerToken: '',
				captchaImgSrc: '',
				loginFormRules: {
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'change'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}, ],
					captchaValue: [{
						required: true,
						message: '验证码',
						trigger: 'change'
					}, ],
				},
				registerFormRules: {
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'change'
					}, ],
					captchaValue: [{
						required: true,
						message: '请输入邮箱验证码',
						trigger: 'change'
					}, ],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur',
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						}
					],
					checkPassword: [{
						validator: validateCheckPassword,
						trigger: 'blur'
					}],
					gameName: [{
							required: true,
							message: '请输入游戏内ID',
							trigger: 'blur',
						},
						{
							min: 3,
							max: 20,
							message: '长度在 3 到 20 个字符',
							trigger: 'blur'
						}
					]
				},
				loginDialogVisible: true,
				registerDialogVisible: false,
				registerInfoDialogVisible: false,
				CaptchaInputStatus: true,
				loading: false,
			}
		},
		mounted() {
			
		},
		methods: {
			getCaptcha(captchaType) {
				if (captchaType == "defaultType") {
					this.CaptchaInputStatus = false;
					let params = new URLSearchParams();
					params.append("captchaType", captchaType);
					this.$axios.post("/user/getCaptcha", params).then(res => {
						this.captchaImgSrc = res.data.data.captchaImg;
						this.loginForm.captchaKey = res.data.data.captchaKey;
					})
				} else if (captchaType == "emailType") {
					this.loading = true;
					const re = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
					if (re.test(this.registerForm.email)) {
						let params = new URLSearchParams();
						params.append("captchaType", captchaType);
						params.append("email", this.registerForm.email);
						this.$axios.post("/user/getCaptcha", params).then(res => {
							this.loading = true;
							if (res.data.code != "200") {
								this.$message.error(res.data.msg);
								this.loading = false;
								return
							}
							this.$message.success(res.data.msg);
							this.loading = false;
						})
					} else {
						this.$message.error("请输入正确的邮箱");
						this.loading = false;
					}
				}
			},
			getCaptchaOnce() {
				if (this.CaptchaInputStatus) {
					this.getCaptcha('defaultType');
					this.CaptchaInputStatus = false;
				}
			},
			openRegisterForm() {
				this.registerDialogVisible = true;
				this.loginDialogVisible = false;
			},
			closedRegisterDialog() {
				this.loginDialogVisible = true;
				this.registerDialogVisible = false;
			},
			doLogin() {
				this.$refs.loginFormRef.validate(async (valid) => {
					if (!valid) return false;
					this.loading = true;
					let params = new URLSearchParams();
					params.append("email", this.loginForm.email);
					params.append("password", this.loginForm.password);
					params.append("captchaKey", this.loginForm.captchaKey);
					params.append("captchaValue", this.loginForm.captchaValue);
					this.$axios.post("/user/loging", params).then(res => {
						console.log(res);
						if (res.data.code != "200") {
							this.$message.error(res.data.msg);
							this.loading = false;
							return
						}
						// if(res.data.data.cookie!=null & res.data.data.cookie!=""){
						// 	document.cookie=res.data.data.cookie;
						// }
						this.user=res.data.data.user;
						window.localStorage.setItem("mcsittoken", res.data.data.token);
						this.$message.success("欢迎进入:"+res.data.data.user.gameName);
						this.loading = false;
						this.$router.push('/index');
						let params2 = new URLSearchParams();
						params2.append("j_username", res.data.data.user.gameName);
						params2.append("j_password", this.loginForm.password);
						this.$axios2.post("/dynmap/up/login", params2);
					});
					
				});
			},
			nextRegister() {
				this.$refs.registerFormRef.validate(async (valid) => {
					if (!valid) return false;
					this.loading = true;
					let params = new URLSearchParams();
					params.append("email", this.registerForm.email);
					params.append("captchaValue", this.registerForm.captchaValue);
					this.CaptchaInputStatus = false;
					this.$axios.post("/user/registerEmail", params).then(res => {
						if (res.data.code != "200") {
							this.$message.error(res.data.msg);
							this.loading = false;
							return
						}
						this.registerToken = res.data.data.registerToken;
						this.registerDialogVisible = false;
						this.registerInfoDialogVisible = true;
						this.loading = false;
						
					});
					
				});
				
			},
			doRegister() {
				this.$refs.registerInfoFormRef.validate(async (valid) => {
					if (!valid) return false;
					this.loading = true;
					let params = new URLSearchParams();
					params.append("user", JSON.stringify(this.registerForm));
					params.append("registerToken", this.registerToken);
					this.$axios.post("/user/registerUser", params).then(res => {
						console.log(res);
						if (res.data.code != "200") {
							this.$message.error(res.data.msg);
							this.loading = false;
							return
						}
						this.$message.success(res.data.msg);
						this.registerInfoDialogVisible = false;
						this.loginForm.email = this.registerForm.email;
						this.loginDialogVisible = true
						
						this.loading = false;
					})
				});
				
			},
		},
	}
</script>

<style scoped>
	/* 登录弹窗 */
	#loginDialog .el-dialog {
		max-width: 600px;
		min-width: 250px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.9);
	}

	#registerDialog .el-dialog {
		max-width: 650px;
		min-width: 250px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.9);
	}

	#CaptchaFormItem .el-input {
		float: left;
		min-width: 110px;
		width: 45%;
		margin-right: 10%;
	}

	#CaptchaFormItem {
		overflow: hidden;
	}

	#captchaImg {
		display: block;
		height: 40px;
		background-color: rgba(0, 0, 0, 0);
	}

	#loginButton {
		width: 50%;
		height: 50px;

	}

	#registerLink {
		margin-right: 40px;
		height: 30px;
		font-size: 16px;
	}
</style>
